<template>
  <el-row>
    <el-col :span="18" :offset="3">
      <el-row>
        <el-col :span="24">
          <el-steps :active="active" align-center>
            <el-step title="验证身份"></el-step>
            <el-step title="修改登录密码"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </el-col>
        <el-col :span="24" style="margin-top: 20px;">
          <el-form class="el-form-col" :model="model" label-position="left" ref="elForm" label-width="120px">
            <el-row class="row">
              <template v-if="active == 1">
                <el-col :span="24">
                  <el-form-item label="登录手机">
                    <el-input readonly :value="phone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="code" label="验证码" :rules="[
                    {required: true, message: '验证码必须', trigger: 'blur'}
                  ]">
                    <el-input v-model="model.code">
                      <template slot="append">
                        <el-button @click.prevent="getVerificationCode" :disabled="times > 0">{{ verificationCodeText }}
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </template>
              <template v-if="active == 2">
                <el-col :span="24">
                  <el-form-item key="pwd" prop="pwd" label="请输入新密码" :rules="[
                      {required: true, message: '新密码必须且6到12位', trigger: 'blur', min: 6, max: 12}
                    ]">
                    <el-input type="password" v-model="model.pwd"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24" key="pwdTow">
                  <el-form-item prop="pwdTwo" label="再次确认" :rules="[
                    {required: true, message: '再次确认必须', trigger: 'blur'},
                    {validator: isSame, otherValue: model.pwd, message: '密码必须一致', trigger: 'blur'}
                  ]">
                    <el-input type="password" v-model="model.pwdTwo"/>
                  </el-form-item>
                </el-col>
              </template>
              <template v-if="active ==3">
                <el-col :span="24" class="text-center">
                  <el-form-item label-width="0px">
                    <p><i class="el-icon-success m--font-success font-light-blue" style="font-size: 80px"></i></p>
                    <p>修改成功</p>
                    <p>下次登录请使用新密码登录</p>
                  </el-form-item>
                </el-col>
              </template>
              <el-col class="text-center" :span="24">
                <el-button class="btn-block btn-lg" :loading="loading" type="primary" @click.prevent="submit">
                  {{ active == 3 ? '确定' : '下一步' }}
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
import {filterDataBaseDictionary} from '@/filters'
import {isSame} from '@/utils/validate'
import {dotData} from '@/utils'

export default {
  filters: {
    filterDataBaseDictionary
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      active: 1,
      model: {
        code: '',
        pwd: '',
        pwdTwo: ''
      },
      verificationCodeText: '获取验证码',
      getVerificationCodeButtonDisabled: false,
      config: {
        times: 60
      },
      times: 0,
      loading: false
    }
  },
  computed: {
    phone() {
      let temp = this.truePhone || ''
      return temp.substr(0, 3) + '*****' + temp.substr(-3, 3)
    },
    truePhone() {
      return this.data.phone
    }
  },
  methods: {
    isSame,
    getVerificationCode() {
      this.times = this.config.times
      this.$ajax.get('/ms-common-user/user/sendSms', {
        phone: this.truePhone,
        actionId: 'forgotPassword'
      }).then(response => {
        const success = response.success
        if (success) {
          this.timeReduce()
        }
      })
    },
    timeReduce() {
      if (this.times > 0) {
        this.verificationCodeText = this.times + 's'
        setTimeout(this.timeReduce, 1000)
        this.times -= 1
      } else {
        this.verificationCodeText = '获取验证码'
      }
    },
    // 验证验证码
    checkCode() {
      let checkData = {}
      checkData.actionId = 'forgotPassword'
      checkData.phone = this.truePhone
      checkData.code = this.model.code
      this.loading = true
      this.$ajax.get('/ms-common-user/user/check-verification-code', checkData).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.active = 2
        }
      }).finally(_ => {
        this.loading = false
      })
    },
    // 修改密码
    changePassword() {
      let data = {
        id: this.data.userId,
        newPwd: this.model.pwd,
        core: this.model.code
      }
      this.loading = true
      this.$ajax.post('/ms-common-user/user/saveLoginPwd', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.active = 3
        }
      }).finally(_ => {
        this.loading = false
      })
    },
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          return
        }
        if (this.active === 1) {
          this.checkCode()
        } else if (this.active === 2) {
          this.changePassword()
        } else if (this.active === 3) {
          this.$emit('update', true)
        }
      })
    }
  }
}
</script>
